<template>
  <div class="about" @mousemove="mouseMove">
    <h1>This is an about page</h1>
    <p>鼠标位置：x:{{ x }}---y:{{ y }}</p>
    <p v-if="loading">等待中</p>
    <div v-else class="box">
      <img :src="dogUrl" alt="" width="100">
    </div>
  </div>
</template>

<script lang="ts">
import {defineComponent} from "vue";

export default defineComponent({
  name: "AboutView",
});
</script>

<script lang="ts" setup>

import MousePoint from './hooks/useMousePoint'
import ShowDog from './hooks/useShowDog'

const {x, y, mouseMove} = MousePoint
const {dogUrl, loading} = ShowDog


</script>
<style lang="scss" scoped>
.about {
  width: 100%;
  height: 300px;
  background-color: pink;
}

.box {
  width: 300px;
  height: 150px;
  border: 1px solid black;
  display: inline-table;
}
</style>
